{include file="public/header"}
        <style scoped>
            .el-select-dropdown {
            padding: 0;
            }
        </style>
         {include file="public/style"}
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>工具管理</el-breadcrumb-item>
            <el-breadcrumb-item>国家列表</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
        <el-card > 
                    <div style="display: flex;align-items: center;justify-content: flex-start;">
                <el-form :inline="true" :model="searchForm" size="small"  ref="refsearchForm">                
                    <el-form-item label="国家中文名称中文">                     
                        <el-input v-model="searchForm.description" placeholder="请输入国家中文名称" clearable filterable></el-input>
                    </el-form-item>                   
           
                    
                    <el-form-item>
                        <el-button type="primary"  size="small" plain @click="getSearch" icon="el-icon-search" v-cloak>查询</el-button>
                    </el-form-item>          
                  </el-form>                
             
            </div>

            <el-table :data="tablelist"   style="width: 100%;margin-bottom: 20px;"  row-key="id"  border >
                <el-table-column   prop="id" label="ID" width="80"> </el-table-column>
                <el-table-column   prop="description" label="国家名称" min-width="280"> </el-table-column>     
                <el-table-column   prop="name" label="国家英文名字" min-width="280"> </el-table-column>             
                <el-table-column   prop="countryid" label="国家缩写" min-width="280"> </el-table-column>  
                <el-table-column   prop="chinaarea" label="所属州" min-width="280"> </el-table-column>            
                <el-table-column   prop="currency" label="国家币种" min-width="280"> </el-table-column>  
                <el-table-column   prop="valid"  label="是否有效" > 
                    <template v-slot="{row}">
                        <span v-if="row.valid===1">
                            <el-tag type="success">有效</el-tag>
                            </span>
                            <span   v-if="row.valid===0">
                            <el-tag type="danger">无效</el-tag>                                                
                        </span>   
                    </template>                          
                </el-table-column>
            </el-table>            
              <!-- page -->            
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
                :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>          
        </el-card>   
  
    </div>

    <script>
        new Vue({
            el: '#app',
            data: function () {
                return {    
                  
                    total:0,   //分页总页数      
                    tablelist:[] ,              
                    searchForm: { 
                        description:'',
                        pagenum: 1,
                        pagesize: 20, 
                    },      
                   
                }
            },
            mounted(){        
                this.getSearch()
            },
            methods: {        

                async getDatalist() {
                    const res = await axios.post('/admin/Config/country_list', {params: this.searchForm})
                        if (res.status !== 1) {
                            return this.$message.error(res.info);
                        }
                    this.total = res.info.total
                    this.tablelist = res.info.list

                },
                    
                handleSizeChange(newSize) {
                    this.searchForm.pagesize = newSize
                    this.getDatalist()
                },
                handleCurrentChange(newPage) {
                    this.searchForm.pagenum = newPage
                    this.getDatalist()
                },
                    
                getSearch() {
                    this.searchForm.pagenum = 1
                    this.getDatalist()
                },
            
           
            }   
        })
    </script>
</body>  
</html>
